<template>
  <view>
    <view class="swiper-box">
      <uni-swiper-dot :info="swiperInfo" :current="current" :dots-styles='dotsStyles' field="content" mode="round">
        <swiper :autoplay="true" :interval="5000" :duration="1000" :circular="true" indicator-active-color="#fff"
          indicator-color="gray" @change='changeImage'>
          <swiper-item v-for="(item, i) in swiperInfo" :key="i" @click="goGuide(item)">
            <view class="swiper-item" @click="goGuide(item)">
              <image :src="item.imageUrl"></image>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
      <view class="image-title">
        <uni-icons type="location" size="20" color="#fff"></uni-icons>
        <text>{{swiperInfo[current].description}}</text>
      </view>
    </view>

    <view class="user-sse">
      <uni-notice-bar show-icon scrollable speed='20' background-color='#fff' :text="sseInfo" />
      </uni-section>
    </view>

    <view class="devide-container">
      <view class="devide">
        -------------------------------
      </view>
      <view class="text">
        核心功能
      </view>
      <view class="image">
        <image src="/static/nanbiyesheng.png" mode=""></image>
      </view>
    </view>

    <view class="core-nav">
      <view class="nav-container">
        <core-nav title='每日答题' url='/static/meiridati.png' @goQuestions='goQuestions'></core-nav>
        <core-nav title='我的社区' url='/static/shequ.png' @goCommunity='goCommunity'></core-nav>
        <core-nav title='积分商城' url='/static/shangcheng.png' @goIntegralShop='goIntegralShop'></core-nav>
        <core-nav title='更多功能' url='/static/gengduo.png' @goMore='goMore'></core-nav>
      </view>
    </view>

    <view class="devide-container">
      <view class="image" style="width: 70rpx;height: 50rpx;">
        <image src="/static/zu.png" mode=""></image>
      </view>
      <view class="text">
        热门社团
      </view>
      <view class="devide">
        -------------------------------
      </view>
    </view>

    <view class="orgnization-nav">
      <block v-for='(item,index) in orgnizationInfo' :key='index'>
        <view class="orgnization-box" @click="goOrgnization(item.orgId)">
          <view class="image">
            <image src="/static/mQMdohkZA8.jpg" mode=""></image>
          </view>
          <view class="orgnization-name">
            {{item.orgName}}
          </view>
          <view class="time">
            <uni-dateformat :date="item.foundedDate" format='yyyy-MM-dd'></uni-dateformat>
          </view>
        </view>
      </block>
    </view>

    <view class="devide-container">
      <view class="devide">
        -------------------------------
      </view>
      <view class="text">
        周边信息
      </view>
      <view class="image">
        <image src="/static/nvbiyesheng.png" mode=""></image>
      </view>
    </view>

    <view class="advertisement-container">
      <block v-for="(item,index) in advertisementInfo" :key='index'>
        <view class="advertisement-box">
          <view class="advertisement-title">
            {{item.title}}
          </view>
          <view class="advertisement-status outTime">
            {{item.status}}
          </view>
          <view class="merchantInfo">
            <text class="name">{{item.merchantVO.name}}</text>
            <text class="phone">联系电话：<text class="color">{{item.merchantVO.phone}}</text></text>
          </view>
          <view class="advertisement-content">
            {{item.content}}
          </view>
          <view class="advertisement-footer">
            <view class="time">
              <uni-dateformat :date="item.startTime" format='yyyy-MM-dd'></uni-dateformat>
            </view>
            <view class="address">
              {{item.merchantVO.address}}
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        page: 1,
        pagesize: 2,
        current: 0,
        sseInfo: '',
        advertisementInfo: [],
        orgnizationInfo: [],
        swiperInfo: [],
        dotsStyles: {
          backgroundColor: 'gray',
          border: 'gray',
          color: '#fff',
          selectedBackgroundColor: '#fff',
          selectedBorder: '#fff',
          bottom: 20,
        }
      }
    },
    created() {
      // this.getAdvertisementInfo()
      this.getSwiperInfo()
      this.getSseInfo()
    },
    onLoad() {
      this.getOrgnizationInfo()
    },
    methods: {
      async getSwiperInfo() {
        const obj = {
          page: 1,
          pagesize: 10,
        }
        const {
          data
        } = await uni.$http.post('/users/scenery/page', obj)
        console.log(data.data.records);
        this.swiperInfo = data.data.records
      },
      async getSseInfo() {
        const data = await uni.$http.get('/users/sse')
        this.sseInfo = data.data.substring(5, data.data.length)
      },
      goGuide(item) {
        uni.navigateTo({
          url: '/subpkg/guide/guide?item=' + JSON.stringify(item)
        })
      },
      goCommunity() {
        uni.switchTab({
          url: '/pages/community/community'
        })
      },
      goSchoolInfo() {
        uni.switchTab({
          url: '/pages/info/info'
        })
      },
      goIntegralShop() {
        uni.navigateTo({
          url: '/subpkg/integralShop/integralShop'
        })
      },
      goMore() {
        uni.navigateTo({
          url: '/subpkg/more/more'
        })
      },
      goOrgnization(id) {
        uni.navigateTo({
          url: '/subpkg/orgnizationDetail/orgnizationDetail?orgId=' + id
        })
      },
      changeImage(e) {
        this.current = e.detail.current
      },
      goQuestions() {
        uni.navigateTo({
          url: '/subpkg/questions/questions'
        })
      },
     async getOrgnizationInfo() {
       const data = await uni.$http.post('/users/orgnization/page',{
         page:1,
         pagesize:2
       })
       console.log(data.data.data.records);
       this.orgnizationInfo = data.data.data.records
      },
      async getAdvertisementInfo() {
        let that = this
        const obj = {
          page: that.page,
          pagesize: that.pagesize
        }
        const {
          data: {
            data
          }
        } = await uni.$http.post('/users/advertisement/page', obj)
        console.log(data.records);
        this.advertisementInfo = data.records
      },
    },
    computed: {
      ...mapState('my_user', ['userInfo', 'token'])
    },
    onReachBottom() {
      this.pagesize += 2
      this.getAdvertisementInfo()
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .swiper-box {
    position: relative;

    swiper {
      height: 480rpx;
      pointer-events: auto;

      .swiper-item {
        width: 100%;
        height: 100%;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .image-title {
      position: absolute;
      top: 0;
      display: flex;
      width: 100%;
      height: 100%;
      padding-left: 20rpx;
      background-color: rgba(0, 0, 0, 0.05);
      pointer-events: none;

      text {
        color: #fff;
        font-size: 30rpx;
        line-height: 160rpx;
      }
    }
  }

  .user-sse {
    // margin-top: -20rpx;
  }

  .devide-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    color: #aaa;
    overflow: hidden;

    .image {
      width: 64rpx;
      height: 64rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .text {
      margin: 0 20rpx;
      font-size: 28rpx;
    }

    .devide {
      color: #ccc;
    }
  }

  .core-nav {
    background-color: #fff;
    border-radius: 30rpx 30rpx 0 0;
    overflow: hidden;

    .nav-container {
      display: flex;
      padding: 10rpx 0;
      padding-bottom: 0;
    }
  }

  .orgnization-nav {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    padding: 30rpx 10rpx;
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 0 0 15rpx #ccc;

    .orgnization-box {
      display: flex;
      flex-direction: column;
      width: 300rpx;
      margin: 0 10rpx;
      margin-left: 20rpx;
      margin-bottom: 30rpx;
      padding-bottom: 20rpx;
      background-color: #fff;
      color: #333;

      .image {
        width: 300rpx;
        height: 300rpx;
        border-radius: 20rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .orgnization-name {
        margin-top: 20rpx;
        color: #555;
        font-size: 30rpx;
        text-align: center;
      }

      .time {
        margin-top: 20rpx;
        font-size: 26rpx;
        text-align: center;
        color: #999;
      }
    }
  }

  .advertisement-container {
    margin-top: 30rpx;
    padding-bottom: 30rpx;
    background-color: #fff;

    .advertisement-box {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 90%;
      margin: 0 auto;
      margin-top: 30rpx;
      padding: 10rpx 0;
      padding-top: 20rpx;
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 0 0 15rpx #ccc;

      .color {
        color: #007aff;
      }

      .advertisement-title {
        font-size: 32rpx;
        padding: 0 20rpx;
        color: #555;
      }

      .advertisement-status {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        padding: 6rpx 10rpx;
        font-size: 24rpx;
      }

      .ok {
        background-color: #b9d3f5;
        color: #007aff;
      }

      .outTime {
        background-color: #eee;
        color: #666;
      }

      .merchantInfo {
        display: flex;
        justify-content: space-between;
        margin-top: 15rpx;
        padding: 0 20rpx;
        font-size: 26rpx;
        color: #999;
      }

      .advertisement-content {
        margin-top: 30rpx;
        padding: 0 20rpx;
        font-size: 30rpx;
        color: #555;
      }

      .advertisement-footer {
        display: flex;
        justify-content: space-between;
        border-top: 1rpx solid #eee;
        margin-top: 30rpx;
        padding: 10rpx 20rpx;
        font-size: 26rpx;
        color: #aaa;
      }
    }
  }
</style>